<template>
  <div>
    <!-- 头部 -->
    <div class="top">传智播客 黑马程序员Vue.js</div>
    <div class="top2">
      <ul>
        <li>
          <div class="left">
            <div class="anl">
              <van-switch
                v-model="checked"
                active-color="#ee0a24"
                inactive-color="#dcdee0"
              />
            </div>
            <div class="right">
              <div class="tup"><img src="../assets/bg.jpg" alt="" /></div>
              <div class="wenzi">
                <p>华为(HUAWEI)荣耀6Plus 16G双4G版</p>
                <div class="jiage">
                  <span class="jiagehong">￥2195</span>
                  <van-stepper v-model="value" />
                  <span>删除</span>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="left">
            <div class="anl">
              <van-switch
                v-model="checked"
                active-color="#ee0a24"
                inactive-color="#dcdee0"
              />
            </div>
            <div class="right">
              <div class="tup"><img src="../assets/bg.jpg" alt="" /></div>
              <div class="wenzi">
                <p>华为(HUAWEI)荣耀6Plus 16G双4G版</p>
                <div class="jiage">
                  <span class="jiagehong">￥2195</span>
                  <van-stepper v-model="value" />
                  <span>删除</span>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="left">
            <div class="anl">
              <van-switch
                v-model="checked"
                active-color="#ee0a24"
                inactive-color="#dcdee0"
              />
            </div>
            <div class="right">
              <div class="tup"><img src="../assets/bg.jpg" alt="" /></div>
              <div class="wenzi">
                <p>华为(HUAWEI)荣耀6Plus 16G双4G版</p>
                <div class="jiage">
                  <span class="jiagehong">￥2195</span>
                  <van-stepper v-model="value" />
                  <span>删除</span>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="close">
      <div class="closeleft">
        <div class="zongjia">总计(不含运费)</div>
        <div class="yixuanzhe">已选择的商品0件,总价￥0元</div>
      </div>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item
        icon="manager-o
"
        >会员</van-tabbar-item
      >
      <van-tabbar-item
        icon="cart-o
"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      checked: true,
      value: 1,
    };
  },
  methods: {
    onInput(checked) {
      Dialog.confirm({
        title: "提醒",
        message: "是否切换开关？",
      }).then(() => {
        this.checked = checked;
      });
    },
  },
};
</script>

<style lang="less">
.closeleft {
  height: 100px;
  background-color: #eeeeee;
  .zongjia {
  }
}
li {
  border-bottom: 1px solid #eeeeee;
}
.jiage {
  .jiagehong {
    color: red;
  }
  padding: 0 10px;
  margin-top: 20px;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  .van-stepper {
    width: 120px;
  }
}
.wenzi {
  margin-top: 18px;
  margin-left: 30px;

  font-size: 19px;
  flex: 1;
  p {
    color: #47a5ff;
  }
}
.tup {
  margin-top: 18px;
  height: 60px;
  width: 50px;

  img {
    width: 128%;
    height: 134%;
  }
}
.left {
  display: flex;
}
.right {
  display: flex;
  flex: 1;
  height: 120px;
}
.anl {
  text-align: center;
  height: 120px;
  line-height: 140px;
  width: 20%;
}
.top {
  height: 50px;
  color: #fefeff;
  line-height: 50px;
  text-align: center;
}
</style>